<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="业务名称" prop="BusinessName">
			<el-input v-model="ruleForm.BusinessName" />
		</el-form-item>
		<el-form-item label="业务描述" prop="BusinessDesc">
			<el-input v-model="ruleForm.BusinessDesc" />
		</el-form-item>	
	
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
	import { reactive, ref,onMounted } from 'vue'
		import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
		import { ElNotification } from 'element-plus'
		import businApi from "../../api/businessInfoapi"
		
		const emit = defineEmits(['onSave'])
		
		interface RuleForm {
			BusinessName: string
			BusinessDesc: string
		}
		
		const formSize = ref<ComponentSize>('default')
		const ruleFormRef = ref<FormInstance>()
		const ruleForm = reactive<RuleForm>({
			BusinessName: '',
			BusinessDesc: '',
		})
		
	
		
		
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return
			await formEl.validate((valid, fields) => {
				if (valid) {
					businApi.post(ruleForm).then(res => {
						if (res.code == 1) {
							ElNotification({
								title: 'Success',
								message: '添加成功',
								type: 'success',
								duration: 800,
								onClose: () => {
									emit("onSave", true)
								}
							})
						} else {
							ElNotification({
								title: 'Error',
								message: '失败',
								type: 'error',
								duration: 800,
							})
						}
					}).catch(err => {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'error',
							duration: 800,
						})
					})
				} else {
					console.log('error submit!', fields)
				}
			})
		}
		
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.resetFields()
		}
		
</script>

<style>
</style>